import { Component, OnInit } from '@angular/core';
import * as c3 from 'c3';
import { ChartOptionCreater } from 'app/ptpmc/model/comm/chart-option-creater';
import { Observable } from 'rxjs';
declare var $: any;

@Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

    prodCountChartOption: any = {};
    stChartOption: any = {};
    btChartOption: any = {};
    ctChartOption: any = {};
    list: any[] = [null];
    loading = true;
    dateTime = new Date();
    subArea = '';
    heroes: any[] = [
        { id: 1, fullName: '生产线1', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 2, fullName: '生产线2', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 3, fullName: '生产线3', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 4, fullName: '生产线4', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 5, fullName: '生产线5', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 6, fullName: '生产线6', shiftName: '早班', shiftDay: '2018-06-21' },
        { id: 7, fullName: '生产线7', shiftName: '早班', shiftDay: '2018-06-21' }
    ];
    chartsMap = new Map<number, any>();
    timer: any;
    countTimer: any;
    alarmTimer: any;
    constructor() { }

    ngOnInit() {
        this.loading = true;
        this.loading = false;
        this.dateTime = new Date();
        // 系统时间
        this.timer = setInterval(() => {
            this.dateTime = new Date();
        }, 1000);

        // 获取产量实时监控 30秒钟一次
        this.countTimer = setInterval(() => {
            this.showPordCountChart(null);
        }, 30000);

        // 获取报警实时监控 1 秒钟一次
        this.alarmTimer = setInterval(() => {
            this.showTopChart(null);
        }, 1000);
    }

    /**ECharts图表相关*/
    onChartInit(index: number, echartsIntance: any): void {
        this.chartsMap.set(index, echartsIntance);
        Observable.fromEvent(window, 'resize')
            .debounceTime(100) // 以免频繁处理
            .subscribe((event) => this.chartsMap.forEach((v, k) => v.resize()));
    }
    private showPordCountChart(sumShiftList: Array<any>): void {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['小时1', '小时2', '小时3', '小时4', '小时5', '小时6', '小时7', '小时8', '小时9', '小时10', '小时11']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                top: '20px',
                left: '40px',
                right: '40px',
                bottom: '30px',
                containLabel: false
            },
            series: [{
                data: [80, 80, 80, 80, 80, 80, 80, 80],
                name: '目标',
                type: 'line'
            },
            {
                data: [112, 245, 189, 90, 80, 44, 88, 0],
                name: '实际产量',
                type: 'bar'
            }]
        };

        this.prodCountChartOption = option; // 产量图
    }

    private showTopChart(list: Array<any>): void {
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: ['130A1_', '130A2_', '130R__', '1320M_', '140A__', '160___', '180A1_', '180A2_', '180R__', '190A__']
            },
            yAxis: {
                type: 'value'
            },
            grid: {
                top: '20px',
                left: '40px',
                right: '40px',
                bottom: '30px',
                containLabel: false
            },
            series: [{
                data: [200, 190, 180, 170, 160, 150, 140, 130, 130, 130],
                name: '目标',
                type: 'bar'
            }]
        };
        this.btChartOption = option;
        this.stChartOption = option;
        this.ctChartOption = option;
    }
}
